<template>
  <div class="container">
    <Com-number-input class="input" v-model="min" :min="minValue"  @change="inputChange('min', $event)" size="small" :placeholder="minPlacehoder"></com-number-input>
    <span>&nbsp;~&nbsp;</span>
    <Com-number-input class="input" v-model="max" :min="min" :max="maxValue" @change="inputChange('max', $event)" size="small" :placeholder="maxPlacehoder"></com-number-input>
  </div>
</template>
<script>
import ComNumberInput from '../ComNumberInput'
export default {
  components: {
    ComNumberInput
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    minValue: {
      type: Number,
      default: 0
    },
    maxValue: {
      type: Number,
      default: Infinity
    },
    minPlacehoder: {
      type: String,
      default: '请输入最小值'
    },
    maxPlacehoder: {
      type: String,
      default: '请输入最大值'
    },
  },
  data() {
    return {
      min: void 0,
      max: void 0,
    }
  },
  watch: {
    value(newVal) {
      if (!newVal) {
         this.min = void 0;
         this.max = void 0;
      } else {
        this.min = (newVal && newVal[0]);
        this.max = (newVal && newVal[1]);
      }
    }
  },
  methods: {
    inputChange(type, value) {
      switch(type) {
        case 'min':
          this.min = value;
          break;
        case 'max':
          this.max = value;
          break;
      }
      this.valueChange();
    },
    valueChange() {
      if (this.min > this.max) {
        this.max = void 0;
      }
      let section = [];
      if(this.min !== void 0 || this.max !== void 0) {
        section = [this.min, this.max]
      }
      this.$emit('input', section);
      this.$emit('change', section)
    }
  },
}
</script>
<style scoped>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.input {
  width: 120px;
}
</style>
